<template>
	<view class="page">
		<headerVue title="移除流动性"></headerVue>

		<view class="box margin20">
			<view class="li flex-column flex-between align-center">
				<text style="line-height: 1; color: rgba(255, 255, 255, 0.4);">输入</text>
				<view class="flex-between align-center">
					<input type="text" v-model="quantity"/>
					<view class="max" @click="quantity=totalLP">MAX</view>
				</view>
			</view>
			<viiew class="flex-between w100 margin30">
				<text style="line-height: 1; color: rgba(255, 255, 255, 0.6);">价格</text>
				<view class="flex-column align-end">
					<view style="line-height: 1;">1AICAT={{usdtPrice}}USDT</view>
					<view style="line-height: 1; padding-top: 20rpx;">1USDT={{catPrice}}AICAT</view>
				</view>
			</viiew>
			<view class="lpBtn margin50" @click="removeLP()">移除</view>
		</view>
	</view>
</template>

<script>
	import wallet from "common/wallet";

  export default {
		data(){
			return {
				quantity: 0,
				usdtPrice: 0,
				catPrice: 0,
				totalLP: 0,
			}
		},
		onLoad(option) {
			this.totalLP = option.value
			console.log(this.totalLP)
		},
		async onShow(){
			await this.getCat()
			await this.getUsdt()
		},
		methods: {
			async removeLP(){
				let res = await this.$request("/front/lp/remove", {
					amount: this.quantity
				})
				if(res.code===0) {
          await wallet.removeLiquidity(res.data.signature, res.data.callData).then(() => {
            this.$u.toast("移除成功")
            this.quantity = ''
            this.getCat()
            this.getUsdt()
          }).catch(err => {
            this.$u.toast(err.message)
          })
				}else{
					this.$u.toast(res.msg)
				}
			},

			async getUsdt(){
				const res = await this.$request("/front/lp/getUsdtAmount", {
					amount: 1
				})
				if(res.code===0) {
					console.log(res)
					this.usdtPrice = res.data
					console.log("usdt", this.usdtPrice)
				}
			},
			async getCat(){
				const res = await this.$request("/front/lp/getCatAmount", {
					amount: 1
				})
				if(res.code===0) {
					console.log(res)
					this.catPrice = res.data
					console.log("cat", this.catPrice)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.box {
		width: 670rpx;
		height: 640rpx;
		background: url("../../static/financeManagement/box.png") no-repeat;
		background-size: 100% 100%;
		padding: 70rpx 40rpx 40rpx;
		.li {
			width: 600rpx;
			height: 194rpx;
			border-radius: 21rpx;
			border: 1rpx solid #45F882;
			padding: 30rpx 40rpx;
			.using {
				line-height: 1;
			}
			input {
				flex: 1;
			}
			.max {
				font-weight: 600;
				font-size: 30rpx;
				color: #45F882;
				text-decoration: underline;
			}
		}
		.lpBtn {
			width: 100%;
			height: 100rpx;
			background: url("../../static/financeManagement/kuang2.png") no-repeat;
			background-size: 100% 100%;
			line-height: 96rpx;
			font-size: 32rpx;
			color: #FFDC02;
			text-align: center;
			font-weight: 600;
		}
	}
</style>
